<template>
<keep-alive>
  <div class="buttomtag">
    <div class="bottom">
      
            <div class="item" @click="Chome">
                <div class="img">
             <img src="../assets/img/homecon.png" alt="" v-show="index==1" />
             <img src="../assets/img/home.png" alt="" v-show="index!=1"/>
            </div>
          <p :class="{con:index==1}">首页</p>
        
            </div>
            <div class="item"  @click="Ccategory">
            <div class="img">
             <img src="../assets/img/categorycon.png" alt="" v-show="index==2" />
             <img src="../assets/img/category.png" alt=""  v-show="index!=2" />
            </div>
          <p :class="{con:index==2}">分类</p>
        
            </div>
              <div class="item"  @click="Ccart">
                <div class="img" >
                 <img src="../assets/img/cartcon.png" alt=""  v-show="index==3"/>
                  <img src="../assets/img/cart.png" alt=""  v-show="index!=3"/>
                  </div>
               <p :class="{con:index==3}">购物车</p>
        
            </div>
              <div class="item" @click="Cuser">
                <div class="img">
             <img src="../assets/img/usercon.png" alt="" v-show="index==4" />
             <img src="../assets/img/user.png" alt=""  v-show="index!=4"/>
            </div>
          <p :class="{con:index==4}">个人中心</p>
        
            </div>
           
       
    </div>
  </div>
</keep-alive>
</template>

<script>
export default {
     data() {
        return {
           value:null,
           index:1,
        };
    },
  methods: {
   Chome(){
     this.index=1
    window.localStorage.setItem('btindex',this.index)
     this.$router.push({ path: '/'})
   },
    Ccategory(){
    this.index=2
     window.localStorage.setItem('btindex',this.index)
     this.$router.push({ path: 'category'})
   },
    Ccart(){
       this.index=3
        window.localStorage.setItem('btindex',this.index)
     this.$router.push({ path: 'cart'})
   },
    Cuser(){
       this.index=4
        window.localStorage.setItem('btindex',this.index)
       this.$router.push({ path: 'user'})
   },

  },
  created() {
    this.value=window.localStorage.getItem("btindex");
    if (!this.value==null) {
       return
    }else{
       this.value=1
    }
  },
  watch:{
    'value':function () {
        this.index=window.localStorage.getItem("btindex")
        // console.log(this.index,this.value);
    }
  }
};
</script>

<style lang="scss" scoped>
  .buttomtag{
    position: fixed;
    bottom:0px;
    width: 100%;
    height: 56px;
    background-color: #fff;
    z-index: 5;
    .bottom{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
    .item{
        width: 25%;
        height: 40px;
        .img{
            width: 100%;
            height: 30px;
            position: relative;
            img{
               width: 27px;
               height: 27px;
               display: block;
               margin: 0 auto;
               position: absolute;
               left: 32%;
            }
        }
        p{
            text-align: center;
            color: #9a9a9a;
            font-size: 12px;
            font-weight: 700;
        }
        .con{
            color: red;
        }
    }
    }
  }
</style>